<?php
header('content-type:text/html;charset=UTF-8');

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="query/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
	$.ajaxSetup({
			dataType:'JSON',
			error:function(){
				alert('连接错误');
				}
		});
	
	$(function(){
			var table = $('table').get(0);
			var tableHeader = table.innerHTML;
			var pageNo;
			var pageCount;
			 
			$('#firstButton').click(function(){
				pageNo =1;
				loadData(pageNo,table);
				}).click();
			
			$('#prevButton').click(function(){
				pageNo--;
				loadData(pageNo,table);
				});
			
			$('#nextButton').click(function(){
				pageNo++;
				loadData(pageNo,table);
				});
			
			$('#lastButton').click(function(){
				pageNo = pageCount;
				loadData(pageNo,table);
				});

				function loadData(pageNo,table){
					table.innerHTML = tableHeader;
					$.post('data.php',{'pageNo':pageNo},function(o){
						console.log(o);
						var lists = o.lists;
						pageCount = o.pageCount;
						for(var i=0; i<lists.length; i++){
							var list = lists[i];
							var row = table.insertRow(-1);
							$('<span>',{html:list.id}).appendTo(row.insertCell(-1));
							$('<span>',{html:list.name}).appendTo(row.insertCell(-1));
							$('<span>',{html:list.img}).appendTo(row.insertCell(-1));
							$('<span>',{html:list.price}).appendTo(row.insertCell(-1));
							}
						});
					
					if(pageNo<=1){
						
						$('#prevButton').attr('disabled',true);
						}else{
							
						$('#prevButton').attr('disabled',false);
						}
				
					if(pageNo>=pageCount){
						
						$('#nextButton').attr('disabled',true);
						}else{
							
						$('#nextButton').attr('disabled',false);
						}
					}
		
		
		});
</script>
<style type="text/css">
	table,div{width:250px;margin:auto;text-align:center}
	table,th,td{border:solid 1px;margin:auto;border-collapse:collapse}
	th{background:#cbaf76;}
	td{background:#eadfc8;}
	div{padding-bottom:5px}
</style>
	</head>
	<body>
	<div>
		<button id="firstButton">首页</button>
		<button id="prevButton">上一页</button>
		<button id="nextButton">下一页</button>
		<button id="lastButton">末页</button>
	</div>
		<table>
			<tr>
				<th>ID</th>
				<th>菜名</th>
				<th>图片</th>
				<th>单价</th>
			</tr>
		</table>
	
	</body>
</html>